<template>
  <van-popup v-model:show="showedModel" teleport="body" :overlay-style="{ background: '#000000'}" :style="{ padding: '0px', margin: '0', 'max-width': '100vw' }">
    <div class="videoWrapper">
      <video v-if="props.url && !videoClosed" class="video"  :src="props.url" autoplay controls></video>
      <div class="deleteBtn" @click="closePopup"></div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
const props = defineProps<{
  url: string
}>()
const showedModel = defineModel<boolean>({ default: false })
const videoClosed = ref(false);

const closePopup = () => {
  showedModel.value = false;
}

watch(showedModel, (val) => {
  if (!val) {
    videoClosed.value = true;
  } else {
    videoClosed.value = false;
  }
})
</script>

<style lang="scss" scoped>
.videoWrapper {
  width: 100vw;
  max-height: calc(100vh - env(safe-area-inset-bottom));
  position: relative;

  .video {
    width: inherit;
    height: inherit;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
  }

  .deleteBtn {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    background-image: url('@/assets/icon-upload-delete.png');
    background-size: contain;
  }
}


</style>
